{extend name="$BASE_LIST" /}
{block name="body"}
<link rel="stylesheet" type="text/css" href="__STATIC__/monthPicker/dateRange.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/monthPicker/monthPicker.css"/>

<div class="right-main">
    <div class="page_nav" id="js_page_nav"><span class="page_title">{$page_nav}</span></div>
    <div id="js_main_header" class="ui-form main_header">
        {if condition = "$store_id <= 0"}
        <span>
            <select name="asset_type" id="asset_type" class="form-control" style="width:120px">
                <option value="">筛选资产类型</option>
                {volist name="confs" id="conf"}
                <option value="{$conf.id}">{$conf.name}</option>
                {/volist}
            </select>
        </span>
        <span>
            <select name="change_type" id="change_type" class="form-control" style="width:120px">
                <option value="">筛选变更类型</option>
                <option value="0">减少</option>
                <option value="1">增加</option>
            </select>
        </span>
        <span>
            <select name="type" id="type" class="form-control" style="width:120px">
                <option value="">筛选记录类型</option>
                {volist name="type_list" id="type"}
                <option value="{$type.id}">{$type.type_name}</option>
                {/volist}
            </select>
        </span>

        {/if}
        <div class="left margin-right-5">
            <input style="width:200px" class="form-control" id="month_picker" size="20" />
        </div>
        <span class="frm_input_box search append">
            <a href="javascript:void(0);" id="js_search" class="frm_input_append">
                <i class="icon wb-search" title="搜索"></i>
            </a>
            <input type="text" id="js_keyword" placeholder="请输入用户名\手机号" value="" class="frm_input" />
        </span>
<!--        <span class="right">-->
<!--            <button type="button" id="js_expBtn" class="btn btn-primary"><i class="icon wb-download"></i> 导出</button>-->
<!--        </span>-->

    </div>
    <table id="grid-table">
        <thead>
            <tr>
                <!-- <th data-options="field:'username',width:120, align:'center',sortable: true">用户名</th> -->
                <th data-options="field:'bphone',width:120, align:'center',sortable: true">手机号</th>
                <th data-options="field:'to_phone',width:120, align:'center',sortable: true">对方手机号</th>
                <th data-options="field:'balance_name',width:100, align:'center',sortable: true">资产类型</th>
                <th data-options="field:'change_type',width:120, align:'center',formatter:fromatChangeType">变更类型</th>
                <th data-options="field:'type',width:120, align:'center',formatter:fromatType">记录类型</th>
                <th data-options="field:'before_amount',width:140, align:'center',sortable: true">变更前余额</th>
                <th data-options="field:'amount',width:140, align:'center',sortable: true">金额</th>
                <th data-options="field:'after_amount',width:140, align:'center',sortable: true">变更后余额</th>
                <th data-options="field:'remark',width:200, align:'center',sortable: true">备注</th>
                <th data-options="field:'update_time',width:200, align:'center',sortable: true">更新时间</th>
            
            </tr>
        </thead>
    </table>
</div>

{/block}
{block name="script"}
<script type="text/javascript" src="__STATIC__/monthPicker/dateRange.js"></script>
<script type="text/javascript" src="__STATIC__/monthPicker/monthPicker.js"></script>
<script type="text/javascript">
    var myDate = new Date();
    var month = parseInt(myDate.getMonth()) + 1;
    var toDay = myDate.getFullYear() + '-' + month + '-' + myDate.getDate();
    var dateRange = new pickerDateRange('month_picker', {
        startDate: '1970-01-01',
        endDate: toDay,
        defaultText: ' 至 ',
        theme: 'ta'
    });
    $("#js_search").click(function () {
        reload();
    });
    $(function () {
        $('#grid-table').datagrid({
            url: getURL('loadList'),
            method: "GET",
            height: getGridHeight(),
            rownumbers: true,
            singleSelect: true,
            remoteSort: false,
            multiSort: true,
            emptyMsg: '<span>无相关数据</span>',
            pagination: true,
            pageSize: 20,
            showFooter:true,
            onLoadSuccess: function(data){
                $('#grid-table').datagrid('reloadFooter', [
                    {
                        username: '统计',
                        amount: data.count_total
                    }
                ]);
            }
        });
        //设置分页控件 
        $('#grid-table').datagrid('getPager').pagination({
            pageSize: 20, //每页显示的记录条数，默认为10 
            pageList: [20, 30, 50]
        });
    });
    // <!--0=购买跑鞋  1-外网转入 2-提币 3-退单 4-转账 5-转账手续费 8-后台拨币 ;9=发布悬赏任务 10=跑鞋奖励;11=完成悬赏任务; 12=元气豆互兑换usdt；13=取消悬赏任务；14=悬赏任务增加名额;15=悬赏取消报名；16=系统取消悬赏任务；17=直推发布悬赏奖励；18：直推完成悬赏奖励;100-OTC卖出  101-OTC买入 102-OTC取消, 103-悬赏任务反审核 ,300-后台取消OTC卖出订单,301-后台完成OTC子订单,302后台取消OTC子订单-->
    //记录类型：
    function fromatType(value, row, index){
        var type = {$type_json};
        if(row['id']){
            var text = type[value]
            return text;
        }
    }
    
    function fromatChangeType(value, row, index){
        if(row['id']){
            var text = '<span style="color:#46be8a">减少</span>'
            if(value == 1)
                text = '<span style="color:#ff0000">增加</span>'
            return text;
        }
    }

    $("#asset_type").change(function(){
        reload();
    })
    $("#change_type").change(function(){
        reload();
    })
    $("#type").change(function(){
        reload();
    })
    
    $("#js_expBtn").click(function () {
        var keyword = $("#js_keyword").val();
        var asset_type = $("#asset_type").val();
        var change_type = $("#change_type").val();
        var type = $("#type").val();
        var u_phone = $("#u_phone").val();

        var month_picker = $("#month_picker").val();
        var arr = month_picker.split(" 至 ");
        var startDate = arr[0];
        var endDate = arr[1];
        location.href = getURL('export')+'?asset_type='+ asset_type+"&change_type="+change_type+"&type="+type+"&u_phone="+u_phone+"&keyword="+keyword+"&startDate="+startDate+"&endDate="+endDate;
    });

    function reload() {
        var keyword = $("#js_keyword").val();
        var asset_type = $("#asset_type").val();
        var change_type = $("#change_type").val();
        var type = $("#type").val();
        var u_phone = $("#u_phone").val();

        var month_picker = $("#month_picker").val();
        var arr = month_picker.split(" 至 ");
        var startDate = arr[0];
        var endDate = arr[1];
        $('#grid-table').datagrid('reload', {
            keyword: keyword,
            asset_type:asset_type,
            change_type:change_type,
            u_phone:u_phone,
            type:type,
            startDate: startDate,
            endDate: endDate
        });
    }
</script>
{/block}